<!--富文本组件-->

<template>
  <div class="rich-text-comp w-h-full"
       :style="{
          color: component.compConfigData.color,
          overflow: component.compConfigData.overflow
       }">
    <dynamic-marquee
        v-if="component.compConfigData.marquee && component.compConfigData.marquee.open"
        :direction="component.compConfigData.marquee.direction"
        :reverse="component.compConfigData.marquee.reverse"
        :repeat="component.compConfigData.marquee.repeat"
        :repeatMargin="component.compConfigData.marquee.repeatMargin"
        :speed="component.compConfigData.marquee.speed"
        :hoverPause="component.compConfigData.marquee.hoverPause"
        :pause="component.compConfigData.marquee.pause">
      <div :title="component.compConfigData.title" v-html="component.compConfigData.text"></div>
    </dynamic-marquee>
    <div v-else :title="component.compConfigData.title" v-html="component.compConfigData.text"></div>
  </div>
</template>

<script>

  import FuncCompMixin from '@/mixin/FuncCompMixin'
  import PnDesigner from '@/utils/PnDesigner'

  import DynamicMarquee from 'vue-dynamic-marquee'

  const _this = {
    name: 'RichTextComp',
    mixins: [FuncCompMixin],
    components: {
      DynamicMarquee
    },
    attr: {
      version: '1.1',
      configDataTemp: Object.assign({
        title: '',
        text: '基于SpringBoot+Vue构建的数据可视化开发平台，满足你对数据大屏页面的一切想象',

        color: '#fff',
        overflow: 'hidden',

        marquee: {
          open: false,
          direction: 'column',
          reverse: true, // 翻转
          repeat: true, // 是否重复
          repeatMargin: 10, // 重复间距
          speed: { // 滚动速度
            type: 'pps',
            number: 50
          },
          hoverPause: true, // 鼠标滑入暂停
          pause: false, // 暂停
        }
      }, PnDesigner.buildFuncCompGlobalField())
    },
    data() {
      return {}
    },
    mounted() {
      this.runCustomGlobalJsCode();
    },
    methods: {

    },
    computed: {}
  };

  export default _this
</script>

<style scoped>

</style>
